<template>
  <div class="daylyshare">
    <image src="../../static/images/wenjuan/bg-wjdc.png" class="bg-wj" />
    <u-navbar
      v-if="!isshare"
      height="44"
      title-size="32"
      title-color="#000"
      :title="title"
      :bg-color="'unset'"
      @leftClick="leftClick"
    />
    <u-navbar
      v-else
      left-icon-color="#333"
      left-icon-size="24px"
      left-icon="home"
      :bg-color="'unset'"
      :title="title"
      @leftClick="leftClick2"
    />
    <div class="title">
      <span v-if="questionnaires[0].IS_HIDDEN_TITLE != 1">{{ questionnaires[0].QUESTION_TITLE }}</span>
    </div>
    <div class="content">
      <rich-text
        v-if="questionnaires[0].IS_HIDDEN_TITLE != 1"
        :nodes="questionnaires[0].QUESTION_DESC"
        style="text-align: center;margin-top: 14rpx;"
      />

      <div v-if="questionnaires[0].IMAGE_URL" class="product">
        <image :src="questionnaires[0].IMAGE_URL" class="product-img" />
        <div v-if="questionnaires[0].PRODUCT_NAME" class="product-name">{{ questionnaires[0].PRODUCT_NAME }}</div>
        <div v-if="questionnaires[0].ARTICLE_ID" class="product-introduce" @click="goKnowledge">查看产品介绍</div>
      </div>

      <div
        class="shareImg"
        @click="
          goPage()
        "
      >
        <div class="sharetxt">点击参与问卷调查</div>
        <!-- <div
          class="iconfont icon-chevron-right"
          style="font-size: 60rpx;color: #fff;margin-left: 24rpx;height: 175rpx;"
        /> -->
      </div>
    </div>
  </div>
</template>

<script>
import {
  mapState,
  mapActions
} from 'vuex'
import {
  images2,
  wx_questionnaire_list
} from '@/api'
export default {
  components: {

  },
  data() {
    return {
      // bgWj: require('../../static/images/wenjuan/bg-wjdc.png'),
      isshare: false,
      is_preview: 0,
      title: '问卷调查',
      isPrivate: false,
      shareTxt: '',
      questionnaires: [],
      question_id: '',
      autoRegist: false,
      result_id: null,
      cp: null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    goKnowledge() {
      if (this.questionnaires[0].ARTICLE_ID) {
        wx.navigateTo({
          url: `/page_subject/knowledgeDel/index?id=${this.questionnaires[0].ARTICLE_ID}`
        })
      }
    },
    goBack() {
      this.autoRegist = false
    },
    leftClick() {
      wx.navigateBack({
        delta: 1
      })
    },
    leftClick2() {
      this.$navTo.tab('/pages/index/index')
    },
    async init() {
      this.wx_questionnaire_list()
    },
    async wx_article_unread() {
      const {
        dictionary
      } = await wx_article_unread()
      if (dictionary.length > 0) {
        this.isPrivate = true
      }
    },
    async wx_questionnaire_list() {
      const res = await wx_questionnaire_list({
        question_id: parseInt(this.question_id),
        is_preview: this.is_preview
      })
      this.questionnaires = res.questionnaires
    },
    async goPage() {
      if (!this.questionnaires[0] || this.questionnaires[0].EXISTS_NUM == 0) {
        // wx.navigateTo({
        // 	url: '/pages_index/noSurveryCondition/index?question_id=' + this.question_id
        // })
        this.$utils.showToast('暂无问卷权限')
        return
      }
      const params = [`question_id=${this.questionnaires[0].QUESTION_ID}`]
      const url = '/pages_index/newSurvey/index'

      wx.navigateTo({
        url: `${url}?${params.join('&')}`
      })
    },
    removeTAG(str, len) {
      return str.replace(/<[^>]+>/g, '')
    },
    copyTxt() {
      let str = this.removeTAG(this.shareTxt)
      console.log('str', str)
      wx.setClipboardData({
        data: str,
        success(res) {
          wx.getClipboardData({
            success(res) {
              console.log(res.data) // data
            }
          })
        }
      })
    }
  },
  onLoad(options) {
    // 获取当前页面栈
    const pages = getCurrentPages()
    // 获取当前页面在页面栈中的位置
    const currentPage = pages[pages.length - 1]
    // 判断页面栈中是否只有当前这一页
    this.isshare = pages.length === 1
    if (options.questionId) {
      this.question_id = options.questionId
    }
  }
}
</script>
<style lang="scss" scoped>
	.product {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		margin-top: 68rpx;

		&-name {
			font-weight: 500;
			font-size: 32rpx;
			color: #141414;
			line-height: 44rpx;
			text-align: left;
			font-style: normal;
			margin-top: 32rpx;
		}

		&-img {
			width: 440rpx;
			height: 440rpx;
			border-radius: 8rpx;
		}

		&-introduce {
			font-weight: 500;
			font-size: 32rpx;
			color: #49806F;
			line-height: 44rpx;
			text-align: right;
			font-style: normal;
			text-decoration-line: underline;
			margin-top: 16rpx;
		}
	}

	// .bg1 {
	// 	background: url("https://crm.fwh1988.cn/newimg/wenquan/wenjuanbg2.png");
	// }

	// .bg2 {
	// 	background: url("https://crm.fwh1988.cn/newimg/wenquan/wenjuanbg4.png");
	// }

	.daylyshare {
		min-height: 100vh;
		position: relative;
		overflow-y: auto;
		padding: 224rpx 0 0 0;

		// background-repeat: no-repeat;
		.bg-wj {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
		}

		.title {
			position: relative;
			z-index: 2;
			font-size: 56rpx;
			font-weight: normal;
			color: #9D6E35;
			line-height: 80rpx;
			text-align: center;
			// height: 130rpx;
			padding: 0 32rpx;
		}

		.txt {
			position: relative;
			z-index: 2;
			font-size: 40rpx;
			font-weight: 600;
			color: #fff;
			line-height: 48rpx;
			word-break: break-all;
			margin-top: 18rpx;
			text-align: center;
			width: 98%;
		}

		.content {
			position: relative;
			z-index: 2;
			width: 684rpx;
			height: 780rpx;
			background-size: cover;
			margin: 46rpx auto 0;
			font-size: 28rpx;
			font-weight: 400;
			color: #646566;

			// position: relative;
			.text {
				z-index: 2;
				position: absolute;
				top: 438rpx;
				margin: 0 auto;
				left: 82rpx;
				width: 285px;
				font-size: 28rpx;
				font-weight: 400;
				color: #646566;
				line-height: 48rpx;
			}

			.copy {
				z-index: 2;
				position: absolute;
				top: 812rpx;
				left: 82rpx;

				.txt2 {
					font-size: 32rpx;
					font-weight: 600;
					color: #000;
					font-weight: 600;
					line-height: 48rpx;
				}

				.bg {
					width: 192rpx;
					height: 8rpx;
					background: #438672;
					border-radius: 2rpx;
					padding-top: 4rpx;
				}
			}

			.shareImg {
				z-index: 2;
				width: 500rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				// background-image: url('https://crm.fwh1988.cn/newimg/wenquan/wenjuanbtn.png');
				justify-content: center;
				position: fixed;
				bottom: 10.5%;
				left: 50%;
				transform: translateX(-50%);
				background-color: #78ffe6;
				font-size: 32rpx;
				border-radius: 20rpx;
				color: #000;
				font-weight: bolder;
				/* left: 62rpx; */
				// width: 674rpx;
				// height: 164rpx;
				// text-align: center;
				// line-height: 72rpx;
				// font-size: 48rpx;
				// font-weight: 500;
				// color: #FFFFFF;
				// line-height: 164rpx;
				// text-align: center;
				// background-size: cover;

				// .img {
				// 	width: 80px;
				// 	height: 80px;
				// }

				.txt3 {
					font-size: 28rpx;
					font-weight: 600;
					color: #323233;
					line-height: 48rpx;
					padding-left: 8rpx;
				}
			}
		}
	}

	.txt1 {
		font-size: 36rpx;
		font-weight: 600;
		color: #323233;
	}

	.line {
		width: 258rpx;
		height: 8rpx;
		background: #438672;
		position: absolute;
		position: absolute;
		top: 38rpx;
		opacity: 0.6;
	}

	.title2 {
		position: relative;
		top: 40rpx;
		left: 40rpx;
		width: 80%;
	}

	.share {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.sharetxt {
		z-index: 10;
		// height: 179rpx;
		// margin-left: 20rpx;
	}

	.loginMask {
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background: transparent;
		z-index: 1000;
	}
</style>
